<template>
	<view>
		<view class="posRelative " style="height: 100vh;">
			<view class="bgWhite">
				<view class="plr50 align-center ">
					<view class="avatar radius50">
						<image :src="userInfo.avatar" class="radius50" mode="aspectFill"
							style="width: 100upx;height: 100upx;"></image>
					</view>
					<view class="ml15">
						<view class="align-center">
							<text class="ft18 bold">{{userInfo.nickname}}</text>
							<!-- 如果是会员/plus会员，显示等级 12-->
							<view class="ml10" v-if="userInfo.level<3">
								<image :src="'../../static/images/icon/vip'+userInfo.level+lang+'.png'" mode="heightFix"
									class="block" style="height: 40rpx;"></image>
							</view>
							<!-- 是运营商会员/运营商plus会员，显示星级 34 -->
							<view class="ml10" v-if="userInfo.level>2">
								<image :src="'../../static/images/icon/'+(userInfo.star-1)+lang+'x.png'"
									mode="heightFix" class="block" style="height: 40rpx;"></image>
							</view>
						</view>
						<view class="mt10 gray6 ft13">{{userInfo.phone}}</view>
					</view>
				</view>
			</view>
			<view class="bgWhite plr12 pb10" v-if="userInfo.star">
				<view v-if="userInfo.star<6" class="contentbg w100 plr15 content0"
					:style="{'background-image':'url(../../static/images/icon/'+(userInfo.star-1)+'xbg.png)'}">
					<view class="conbox ft12" v-if="userInfo.star<6">
						<view class="pt18">
							<text class="ft16"
								:style="{color:color}">{{$t('mine').距离}}{{userInfo.star | changeNum}}{{$t('mine').星还有}}</text>
							<text class="ft12" :style="{color:color}">({{$t('mine').需同时达标}})</text>
						</view>
						<view class="mt15 align-center justify-between" :style="{color:color}">
							<text>{{$t('mine').达标门槛}}</text>
							<text>{{starData.total_thre_sell}}/{{starData.star_thre_where}}</text>
						</view>
						<view class="mt8">
							<u-line-progress :percentage="(starData.total_thre_sell/starData.star_thre_where)*100"
								:activeColor="color" inactiveColor="#ffffff" :showText="false"
								height="5"></u-line-progress>
						</view>
						<view class="mt15 align-center justify-between" :style="{color:color}">
							<text>{{$t('mine').累计销售额}}</text>
							<text>{{parseFloat(starData.total_sell)}}/{{starData.star_where}}</text>
						</view>
						<view class="mt8">
							<u-line-progress :percentage="(starData.total_sell/starData.star_where)*100"
								:activeColor="color" inactiveColor="#ffffff" :showText="false"
								height="5"></u-line-progress>
						</view>
					</view>
				</view>
				<view v-else class="contentbg w100 plr15 content0"
					:style="{'background-image':'url(../../static/images/icon/'+(userInfo.star-1)+lang+'xbg.png)'}">
				</view>
			</view>
			<!-- 定位部分 -->
			<view class=" w100 plr12" style="">
				<view class="bgWhite tabs plr15 mt12 radius8">
					<view class="align-center  justify-between ft15 " @click="navTo('/pages/wallet/index')">
						<view class="align-center">
							<image src="../../static/images/mine/icon/wallet.png" mode=""
								style="width: 30upx;height: 30upx;"></image>
							<text class="ft15 ml10">{{$t('mine').我的钱包}}</text>
						</view>
						<view class="align-center gray9">
							<text>{{Currency=='USD'?'$':'￥'}}{{userInfo.view_total_money}}</text>
							<image src="../../static/images/mine/icon/arrowright.png" class="ml10" mode=""
								style="width: 10upx;height: 18upx;"></image>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="bgWhite tabs plr15 mt12 radius8" v-if="userInfo.is_partner==1">
					<view class="align-center justify-between ft15 bgWhite" @click="navTo('/pages/mine/team-list')">
						<view class="align-center">
							<image src="../../static/images/mine/icon/tuanduishuju.png" mode=""
								style="width: 30upx;height: 30upx;"></image>
							<text class="ft15 ml10">{{$t('mine').团队数据}}</text>
						</view>
						<view class="align-center gray9">
							<text>{{$t('mine').查看}}</text>
							<image src="../../static/images/mine/icon/arrowright.png" class="ml10" mode=""
								style="width: 10upx;height: 18upx;"></image>
						</view>
					</view>
				</view>
				<!-- // -->
				<view class="bgWhite tabs plr15 mt12 radius8" v-if="userInfo.grade>=1&&userInfo.level>=3">
					<view class="align-center justify-between ft15" @click="navTo('goodList')">
						<view class="align-center">
							<image src="../../static/images/mine/icon/jiayouzhan.png" mode=""
								style="width: 30upx;height: 30upx;">
							</image>
							<text class="ft15 ml10">{{$t('mine').加油站}}</text>
						</view>
						<view class="align-center gray9">
							<text>{{$t('mine').去兑换}}</text>
							<image src="../../static/images/mine/icon/arrowright.png" class="ml10" mode=""
								style="width: 10upx;height: 18upx;"></image>
						</view>
					</view>
				</view>
				<view class="bgWhite radius8 tabs mt12 plr15">
					<!-- 				<view class="align-center justify-between ft15 bdbe" @click="navTo('order-list')">
						<view class="align-center">
							<image src="../../static/images/mine/icon/order.png" mode=""
								style="width: 30upx;height: 30upx;"></image>
							<text class="ft15 ml10">{{$t('mine').我的订单}}</text>
						</view>
						<view class="align-center gray9">
							<image src="../../static/images/mine/icon/arrowright.png" mode=""
								style="width: 10upx;height: 18upx;"></image>
						</view>
					</view> -->
					<!-- 					<view class="align-center justify-between ft15 bdbe">
						<view class="align-center">
							<image src="../../static/images/mine/icon/msg.png" mode=""
								style="width: 30upx;height: 30upx;">
							</image>
							<text class="ft15 ml10">{{$t('mine').消息中心}}</text>
						</view>
						<view class="align-center gray9">
							<text>{{$t('mine').有消息}}</text>
							<image src="../../static/images/mine/icon/arrowright.png" class="ml10" mode=""
								style="width: 10upx;height: 18upx;"></image>
						</view>
					</view> -->
					<!-- 
					<view class="align-center justify-between ft15 bdbe" @click="navTo('/pages/mine/problem')">
						<view class="align-center">
							<image src="../../static/images/mine/icon/help.png" mode=""
								style="width: 30upx;height: 30upx;">
							</image>
							<text class="ft15 ml10">{{$t('mine').常见问题}}</text>
						</view>
						<view class="align-center gray9">
							<image src="../../static/images/mine/icon/arrowright.png" mode=""
								style="width: 10upx;height: 18upx;"></image>
						</view>
					</view> -->
					<view class="align-center justify-between ft15" @click="navTo('/pages/setting/index')">
						<view class="align-center">
							<image src="../../static/images/mine/icon/set.png" mode=""
								style="width: 30upx;height: 30upx;">
							</image>
							<text class="ft15 ml10">{{$t('mine').设置}}</text>
						</view>
						<view class="align-center gray9">
							<image src="../../static/images/mine/icon/arrowright.png" mode=""
								style="width: 10upx;height: 18upx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				starData: {
					"level": 0,
					"star": 0,
					"total_thre_sell": 0, //达标已有
					"star_thre_where": 0, //达标要求
					"total_sell": 0, //销售额已有
					"star_where": 0, //销售额要求
				},
				color: '', //颜色
				curreny: uni.getStorageSync('currency'), //币种
				lang: '', //语言
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t('mine').我的
			})
			// this.$store.dispatch('getuserInfo')
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('mine').我的
			})
			this.$store.dispatch('getuserInfo')
			// this.curreny = uni.getStorageSync('currency') //币种
			this.lang = uni.getStorageSync('lang').lang //语言
			this.$utils.changeFooterLang()


		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			Currency() {
				return this.$store.state.currency
			},
		},
		watch: {
			userInfo: {
				handler(nVal, oVal) {
					if (nVal.level > 2) {
						this.getstar()
						this.selColor()
					}
				}
			}
		},
		methods: {
			async getstar() {
				const res = await this.$api.getstar()
				if (res && res.code == 1) {
					this.starData = res.data

				}
			},
			selColor() {
				switch (this.userInfo.star) {
					case 1:
						this.color = "#7E3911";
						break;
					case 2:
						this.color = "#4D4774";
						break;
					case 3:
						this.color = "#11497F";
						break;
					case 4:
						this.color = "#AA440D";
						break;
					case 5:
						this.color = "#402C97";
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.plr50 {
		padding: 50rpx;
	}

	.avatar {
		width: 100upx;
		height: 100upx;
		// border: 2upx solid #6A707E;
	}

	.contentbg {
		height: 310upx;
		background-repeat: no-repeat;
		background-size: 100%;

		.conbox {
			width: 440upx;
		}

		.pt18 {
			padding-top: 36upx;
		}
	}

	// .content0 {
	// 	color: #7E3911;

	// 	.issue {
	// 		color: #AB5F34;
	// 	}
	// }

	.tabs {
		>view {
			height: 96upx;
		}
	}
</style>